<template>
  <!-- 亲子 -->
  <div class="parenting-container">
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #list>
        <latest-hot :hot-list="hotList" :title="title"></latest-hot>
        <parent-tar-bar :sub_category="sub_category" @toggle-category="toggleCategory"></parent-tar-bar>
        <parenting-list :parentingList="parentingList"></parenting-list>
      </template>
    </refresh-list>
  </div>
</template>

<script>
import LatestHot from './LatestHot.vue'
import ParentTarBar from './ParentTarBar.vue'
import RefreshList from '../public-component/RefreshList.vue'
import axios from '@/utils/request'
import { mapState } from 'vuex'
import ParentingList from './ParentingList.vue'
export default {
  components: {
    LatestHot,
    ParentTarBar,
    ParentingList,
    ParentingList,
    RefreshList
  },
  props: {
    reset: Boolean
  },
  watch: {
    reset() {
      this.page = 1
      this.hotList = []
      this.parentingList = []
      this.sendRequest()
    }
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      title: '', // 近期热门标题
      hotList: [], // 近期热门数据
      sub_category: '', // 分类参数
      page: 1, // 翻页参数
      parentingList: []
    }
  },
  computed: {
    ...mapState(['sort_by', 'time'])
  },
  methods: {
    // 请求近期热门数据
    async requestLatestHotData() {
      /*
      请求地址:https://api.xmonster.cn/v1/data_proxy
      请求方式:post
      请求参数:
      data:{
        "type":"proxy_rpc_get",
        "request_data":{
          "_command":"/category_topic_feeds",
          "city":"上海"
        }
      }
      */
      const data = await axios({
        url: 'https://api.xmonster.cn/v1/data_proxy',
        method: 'post',
        data: {
          type: 'proxy_rpc_get',
          request_data: {
            _command: '/category_topic_feeds',
            city: '上海'
          }
        }
      })
      if (data.length > 0) {
        const { title, feeds } = data[0]
        this.title = title
        this.hotList = feeds
      }
    },
    // 请求所有数据
    async requestParentingData() {
      /*
      请求接口:https://api.xmonster.cn/v1/data_proxy
      请求方式:post
      请求参数:
      data:{
        "type":"proxy_rpc_get",
        "request_data":{
          "_command":"/category_feeds","category":"nchildren",
          "page":2,    翻页,每次加1
          "lat":"31.2303904",
          "lng":"121.4737021","city":"上海"
          "sub_category":"nexhibition"
          time: '',
          sort_by: ''
        }
      }
      */
      const data = await axios({
        url: 'https://api.xmonster.cn/v1/data_proxy',
        method: 'post',
        data: {
          type: 'proxy_rpc_get',
          request_data: {
            _command: '/category_feeds',
            category: 'nchildren',
            page: this.page,
            lat: '31.2303904',
            lng: '121.4737021',
            city: '上海',
            sub_category: this.sub_category,
            time: this.time,
            sort_by: this.sort_by
          }
        }
      })
      if (data.length > 0) {
        this.parentingList = [...this.parentingList, ...data]
        this.status.loading = false
        this.status.finished = false
        this.page++
      } else {
        this.status.finished = true
      }
    },

    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      await this.requestLatestHotData()
      await this.requestParentingData()
      Toast.clear()
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.parentingList = []
      await this.requestParentingData()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestParentingData()
      this.status.loading = false
    },
    // 修改分类数据
    toggleCategory(category) {
      if (this.sub_category == category) {
        this.sub_category = ''
      } else {
        this.sub_category = category
      }
      this.parentingList = []
      this.page = 1
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      this.requestParentingData()
      Toast.clear()
    }
  },
  async created() {
    this.sendRequest()
  }
}
</script>
<style lang="less" scoped>
.parenting-container {
  padding-bottom: 50px;
  background-color: #f1f1f1;
}
</style>
